<!DOCTYPE html>
<html>
<head>
	<script>
	// An object of games. The key is the game ID and the value is the game
	// config.
	var games = {{ games|safe }};
	var email = "{{ email }}";
	</script>
	<script src="{{ jquery_url|safe }}"></script>
	<script src="/static/common.js"></script>
	<script src="/static/main.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/common.css">
	<style>
	.field_label {
		float: left;
		width: 12em;
		text-align: right;
		margin-right: 0.5em;
	}
	</style>
</head>
<body>
	
	<div class="h2">Hello, {{ nickname }}</div>

	<!-- TODO(davidyu): we should list all playing games of the logged in
	user here. -->

	<form action="/create" method="post">
		<fieldset>
			<legend>Create a new game</legend>
			<div>
				<p>
					<label class="field_label">Game:</label>
					<select id="game" name="game"></select>
					<br>

					<label class="field_label">Game Name:</label>
					<input type="text" name="name" value="A great game">
					<br>

					<div id="players">
						<label class="field_label">Number of Players:</label>
						<select id="num_players" name="num_players"></select>
						<br>
					</div>
				</p>

				<p>
					<label class="field_label">Public Viewable:</label>
					<input type="checkbox" name="public"
					title="Everyone in the world can watch this game">
					<br>

					<label class="field_label">Random Player Order:</label>
					<input type="checkbox" name="random" checked
					title="Randomize the order of the players">
					<br>

					<button id="submit">Create</button>
					<br>
				</p>
			</div>
		</fieldset>
	</form>

</body>
</html>
